:first-letter
Applies styling to the first letter of an element
Once upon a time in a land far far away...
<div class="firstLetter example">
<p>Once upon a time in a land far far away...</p>
</div>
.firstLetter.example p:first-letter {
font-family: Verdana, Geneva, sans-serif;
font-size: 30px;
color: #900;
}
:before & :after
Allows you to insert additional content before or after an element, great for adding images or additional hover text.
Hover Me
<div class="before example">
<p>Hover Me</p>
</div>
.before.example p {
position: relative;
}
.before.example p:after {
content: "(Hoverable)";
padding-left: 20px;
}
.before.example p:hover:before {
content: "This is a magical popup box that uses the :before selector.";
width: 200px;
background-color: #2e2e2e;
color: #A6E22E;
border: 1px solid #C00;
position: absolute;
left: 10px;
top: -20px;
padding: 5px;
}
:empty
If an element contains no inner text the :empty selector will apply the given styling to the element.
This is not empty
This has stuff in it
<div class="empty example">
<p>This is not empty</p>
<p></p>
<p>This has stuff in it</p>
</div>
.empty.example p:empty {
background-color: #09F;
height: 20px;
width: 200px;
}
.empty.example p:empty:before {
content: "This is an empty <p>";
}
:first-child
Selects the first type of item and applies styling only to it.
This is the first paragraph tag
This is not the first paragraph tag
This is also not the first paragraph tag
And neither is this one.
<div class="firstChild example">
<p>This is the first paragraph tag</p>
<p>This is not the first paragraph tag</p>
<p>This is also not the first paragraph tag</p>
<p>And neither is this one.</p>
</div>
.firstChild.example p:first-child {
background-color: black;
color: white;
}
[attribute], [attribute=value]
Selects an element that has the given attribute, or where a given attribute equals a given value.
This contains the hoverData attribute.
This does not contain the hoverData attribute.
This contains a type attribute that equals awesome.
<div class="attribute example">
<p hoverData="This will be displying if you hover over this p tag">This contains the hoverData attribute.</p>
<p>This does not contain the hoverData attribute.</p>
<p type="awesome">This contains a type attribute that equals awesome.</p>
</div>
.attribute.example p {
position: relative;
margin-bottom: 10px;
}
.attribute.example p[hoverData]:hover:before {
content: attr(hoverData);
width: 200px;
background-color: #2e2e2e;
color: #A6E22E;
border: 1px solid #C00;
position: absolute;
left: 10px;
top: -20px;
padding: 5px;
}
.attribute.example p[type=awesome]:after {
content: "<-- This is an awesome paragraph.";
padding-left: 20px;
}
:not
This is a negation selector that instead of telling what you would like to select, you select what you do not want.
This is just a normal p tag
This is a cool tag
This is not a cool tag
<div class="not example">
<p popularity="average">This is just a normal p tag</p>
<p popularity="cool">This is a cool tag</p>
<p popularity="bad">This is not a cool tag</p>
</div>
.not.example p:not([popularity=cool]) {
color: #C00;
}